<template>
  <div class="main-contain">
    <div class="header">
      <el-form inline>
        <el-form-item label="年份">
          <el-date-picker v-model="form.dateTime" type="year" placeholder="选择年" style="width: 150px"
            value-format="YYYY">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="季度">
          <el-select v-model="form.quarter" placeholder="请选择" style="width: 150px" @change="handleChangeSrvice">
            <el-option v-for="item in options" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="校验">
          <el-select v-model="form.type" placeholder="请选择" style="width: 150px" @change="handleChangeSrvice">
            <el-option v-for="item in options" :key="item.dictLabel" :label="item.dictValue" :value="item.dictLabel">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-bx">
          <el-button type="primary" plain @click="getTableData">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一组饼状图 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>各区业务数据分布</span>
      </div>
      <div class="business-data">
        <business-data :dataList="systemList" :title="'系统业务'" :id="'businessId1'"></business-data>
        <business-data :dataList="trafficList" :title="'话务接听'" :id="'businessId2'"></business-data>
        <business-data :dataList="backstageList" :title="'后台审核'" :id="'businessId3'"></business-data>
      </div>
    </el-card>
    <!-- 第二组饼图和柱状图 -->
    <el-row :gutter="10" class="card">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>店内业务量数据对比</span>
          </div>
          <div>
            <businessWork :dataList="workList" :title="'1月份店内各项业务数据'"></businessWork>
          </div>
        </el-card></el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>店内业务量数据对比</span>
          </div>
          <div>
            <customerService></customerService>
          </div>
        </el-card></el-col>

    </el-row>
    <!-- 第三组柱状图 -->
    <el-row :gutter="10" class="card">
      <el-col :span="24">
        <el-card>
          <customerServiceFlow></customerServiceFlow>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第四组柱状图 -->
    <el-row :gutter="10" class="card">
      <el-col :span="24">
        <el-card>
          <customerServiceSystem></customerServiceSystem>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第五组饼状玫瑰图 -->
    <el-card class="card">
      <div slot="header" class="clearfix">
        <span>各片区3月到店客流及单片销售情况</span>
      </div>
      <div class="business-data">
        <roseCharts :id="'rose1'" :title="'到点客流'"></roseCharts>
        <roseCharts :id="'rose2'" :title="'单片式销售'"></roseCharts>
      </div>
    </el-card>
  </div>
</template>

<script>
import businessData from './mixComponents/businessData.vue'
import businessWork from './mixComponents/businessWork.vue'
import customerService from './mixComponents/customerService.vue'
import customerServiceFlow from './mixComponents/customerServiceFlow.vue'
import customerServiceSystem from './mixComponents/customerServiceSystem.vue'
import roseCharts from './mixComponents/roseCharts.vue'
export default {
  components: {
    businessData,
    businessWork,
    customerService,
    customerServiceFlow,
    customerServiceSystem,
    roseCharts
  },
  data() {
    return {
      form: {
        dateTime: '',
        quarter: '',
        type: ''
      },
      systemList: [],
      trafficList: [],
      backstageList: [],
      options: [
        {
          dictLabel: '第一季度',
          dictValue: '1'
        },
        {
          dictLabel: '第二季度',
          dictValue: '2'
        },
        {
          dictLabel: '第三季度',
          dictValue: '3'
        },
        {
          dictLabel: '第四季度',
          dictValue: '4'
        },
      ],
      workList: []
    }
  },
  mounted() {
    // 模拟后端返回
    this.systemList = [
      {
        name: '皖中',
        value: 100,
      },
      {
        name: '皖南',
        value: 88,
      },
      {
        name: '皖北',
        value: 120,
      }]
    this.trafficList = [
      {
        name: '皖中',
        value: 50,
      },
      {
        name: '皖南',
        value: 120,
      },
      {
        name: '皖北',
        value: 15,
      }
    ]
    this.backstageList = [
      {
        name: '皖中',
        value: 20,
      },
      {
        name: '皖南',
        value: 88,
      },
      {
        name: '皖北',
        value: 320,
      }
    ]
    this.workList = [
      {
        name: '系统业务',
        value: '10'
      },
      {
        name: '后台审核',
        value: '10'
      },
      {
        name: '话务接听',
        value: '10'
      },
      {
        name: '激活车次',
        value: '10'
      },
      {
        name: '线上业务',
        value: '10'
      },
      {
        name: '店内营销',
        value: '10'
      },
      {
        name: '大厅咨询',
        value: '10'
      },
      {
        name: '投诉及其他',
        value: '10'
      },
    ]
  },
  methods: {
    handleChangeSrvice(val) { },
    getTableData() { },
    reset() { },
  }

}
</script>

<style lang="scss" scoped>
.business-data {
  width: 100%;
  display: flex;
}

.main-contain {
  margin: 10px 20px;
}

.business-work {
  display: flex;
  justify-content: space-between;
}
.card{
  margin-top: 10px;
}
</style>